<template>
	<view class="profile-container">
		<!-- User Profile Header -->
		<view class="profile-header">
			<view class="user-info-section">
				<image class="avatar" :src="userInfo.avatar || '/static/images/profile.png'" mode="aspectFill"></image>
				<view class="user-details">
					<view class="name-badge">
						<text class="username" v-if="name">{{ name }}</text>
						<text class="username" v-if="!name">去登录</text>
						<image class="verified-badge"
							src="https://www.ruilongan.com/profile/upload/2025/08/25/分组_1_20250825165501A006.png"
							mode="aspectFit"></image>
						<text class="verified-text" v-if="name">已认证</text>
						<text class="verified-text text-gray" v-if="!name">未认证</text>
					</view>
					<text class="user-id">{{ formatPhone(userInfo.phone) }}</text>
					<text class="user-role">健康管理师:{{ userInfo.businessName }}</text>
				</view>
				<view class="edit-profile" @click="editProfile">
					<image class="edit-icon"
						src="https://www.ruilongan.com/profile/upload/2025/07/10/Group_174@2x_20250710091805A084.png"
						mode="aspectFit"></image>
					<text class="edit-text">编辑资料</text>
				</view>
			</view>

			<!-- Membership Card -->
			<view class="membership-card" :style="{ backgroundImage: userRule.cardFaceUrl ? `url(${userRule.cardFaceUrl})` : 'none' }">
				<view class="card-header">
					<view class="vip-title">
						<image class="crown-icon" src="https://via.placeholder.com/24" mode="aspectFit"></image>
					</view>
				</view>
				<view class="card-footer">
					<text class="points">{{userRule.startUpgradeCondition}}/{{ userRule.endUpgradeCondition }} 经验值 &gt;</text>
					<view class="progress-bar">
						<view class="progress" :style="{ width: (userInfo.startUpgradeCondition / userRule.endUpgradeCondition  * 100) + '%' }"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- Membership Benefits -->
		<view class="benefits-section">
			<text class="section-title">会员尊享权益</text>
			<view class="benefits-grid">
				<view class="benefit-item" v-for="(benefit, index) in rightsList" :key="index">
					<image :src="benefit.picUrl | avatarUrlFind('1')" mode="aspectFit" class="benefit-icon"></image>
					<text class="benefit-text">{{ benefit.remark }}</text>
					<text class="benefit-desc">{{ benefit.picDetail }}</text>
				</view>
			</view>
		</view>

		<!-- My Orders -->
		<view class="orders-section">
			<view class="orders-card">
				<view class="orders-header">
					<text class="orders-title">我的订单</text>
					<text class="view-all" @click="viewAllOrders">查看全部</text>
				</view>
				<view class="orders-grid">
					<view class="order-item" @click="handleOrder('pending')">
						<view class="order-icon-wrapper">
							<image class="order-icon" src="https://cos.ruilongan.com/XCX/2025/09/10/待发货_20250910152800A002.png" mode="aspectFit"></image>
							<view class="badge" v-if="orderCounts.pending > 0">{{orderCounts.pending}}</view>
						</view>
						<text class="order-text">待发货</text>
					</view>
					<view class="order-item" @click="handleOrder('received')">
						<view class="order-icon-wrapper">
							<image class="order-icon" src="https://cos.ruilongan.com/XCX/2025/09/10/待收货_20250910152849A003.png" mode="aspectFit"></image>
							<view class="badge" v-if="orderCounts.received > 0">{{orderCounts.received}}</view>
						</view>
						<text class="order-text">待收货</text>
					</view>
					<view class="order-item" @click="handleOrder('refund')">
						<view class="order-icon-wrapper">
							<image class="order-icon" src="https://cos.ruilongan.com/XCX/2025/09/10/Group 176_20250910152923A005.png" mode="aspectFit"></image>
							<view class="badge" v-if="orderCounts.refund > 0">{{orderCounts.refund}}</view>
						</view>
						<text class="order-text">退款/售后</text>
					</view>
				</view>
			</view>
		</view>

		<!-- Points and Balance -->
		<view class="stats-section">
			<view class="stat-item" @click="toPoints">
				<view class="label-row">
					<text class="stat-label">会员积分</text>
					<text class="arrow">&gt;</text>
				</view>
				<text class="stat-value">{{userInfo.usableIntegral}}</text>
				<image class="stat-icon"
					src="https://www.ruilongan.com/profile/upload/2025/08/25/Group_178_20250825165633A007.png"
					mode="aspectFit"></image>
			</view>
			<view class="stat-item" @click="toBalance">
				<view class="label-row">
					<text class="stat-label">储值余额</text>
					<text class="arrow">&gt;</text>
				</view>
				<text class="stat-value">{{userInfo.usableBalance || 0}}</text>
				<image class="stat-icon"
					src="https://www.ruilongan.com/profile/upload/2025/08/25/Group_179_20250825165710A008.png"
					mode="aspectFit"></image>
			</view>
		</view>

		<!-- User Functions -->
		<view class="functions-section">
			<text class="section-title">我的功能</text>
			<view class="functions-grid1">
				<view class="function-item" v-for="(func, index) in functions" :key="index"
					@click="handleFunction(func.type)">
					<image :src="func.icon" mode="aspectFit" class="function-icon"></image>
					<text class="function-text">{{ func.text }}</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		getInfo,
		getUserRuleInfoByUserId
	} from '@/api/vipUser.js'
	import{
		queryOrderNum
	}from '@/api/order.js'
	
	import config from '@/config'

	export default {
		computed: mapGetters(['userId', 'name']),
		data() {
			return {

				userInfo: {
					name: '去登录',
					phone: '',
					role: '',
					avatar: 'https://www.ruilongan.com/profile/upload/2025/06/27/picture_or icon@2x_20250627100120A049.png',
					points: 3921
				},
				orderCounts: {
					pending: 0,
					received: 0,
					refund: 0
				},
				userRule:{},
				rightsList:[],
				benefits: [{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine01_20250710094210A086.png',
						text: '家庭咨询',
						desc: '1对1健康免费咨询'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine02_20250710094401A087.png',
						text: '专属健康管理师',
						desc: 'VIP专属24h服务'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine03_20250710094435A088.png',
						text: '转介绍有礼',
						desc: '每推荐1人得2000积分'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine04_20250710094643A089.png',
						text: '药店折扣9折',
						desc: '药店规定为准'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine05_20250710094706A090.png',
						text: '新品0元试',
						desc: '控糖新品优先体验'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine06_20250710094729A091.png',
						text: '生日礼物',
						desc: '专属精美实物礼品'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine07_20250710094749A092.png',
						text: '节日礼盒',
						desc: '实物豪华礼品'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/mine08_20250710094806A093.png',
						text: '年度旅游',
						desc: '健康主题定制免费旅行'
					}
				],
				functions: [
					// {
					// 	icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/gong01_20250710102243A094.png',
					// 	text: '我的订单',
					// 	type: 'orders'
					// },
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/gong02_20250710102258A095.png',
						text: '地址管理',
						type: 'address'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/gong03_20250710102312A096.png',
						text: '设置',
						type: 'settings'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/gong04_20250710102325A097.png',
						text: '意见反馈',
						type: 'feedback'
					},
					{
						icon: 'https://www.ruilongan.com/profile/upload/2025/07/10/gong05_20250710102337A098.png',
						text: '邀请好友',
						type: 'invite'
					}
				],

			}
		},
		onShow() {
			this.getInfo()
			//todo 之后全放到用户缓存中（又要开发速度还不能有问题，吐了）
			this.getUserRuleInfoByUserId()
			this.queryOrderNum()
		},
		methods: {
			formatPhone(phone) {
				if (!phone || phone.length < 7) return phone;
				return phone.substring(0, 3) + '****' + phone.substring(phone.length - 4);
			},
			editProfile() {
				// Handle profile editing
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/userInfo?userId=' + this.userId
				})
			},
			handleFunction(type) {
				// Handle different function clicks
				const routes = {
					orders: '/subPackage_1/pages/order/order-list',
					address: '/subPackage_1/pages/mine/address/address-list',
					settings: '/pages/mine/setting/index',
					feedback: '/pages/mine/feedback',
					invite: '/pages/mine/invite'
				}
				if (routes[type]) {
					uni.navigateTo({
						url: routes[type]
					})
				}
			},
			handleNavigation(type) {
				// Handle bottom navigation
				const routes = {
					home: '/pages/index/index',
					expert: '/pages/expert/index',
					mall: '/pages/mall/index',
					profile: '/pages/mine/index'
				}
				if (routes[type]) {
					uni.switchTab({
						url: routes[type]
					})
				}
			},
			toPoints() {
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/points/my-points'
				})
			},
			
			toBalance(){
				uni.navigateTo({
					url: '/subPackage_1/pages/mine/balance/my-balance'
				})
			},
			
			viewAllOrders() {
				uni.navigateTo({
					url: '/subPackage_1/pages/order/order-list'
				})
			},
			
			handleOrder(type) {
				const routes = {
					pending: '/subPackage_1/pages/order/order-list?status=pending',
					received: '/subPackage_1/pages/order/order-list?status=received',
					refund: '/subPackage_1/pages/order/order-list?status=refund'
				}
				if (routes[type]) {
					uni.navigateTo({
						url: routes[type]
					})
				}
			},

			getInfo() {
				getInfo(this.userId).then(res => {
					this.userInfo = res.data
				})
			},
			getUserRuleInfoByUserId(){
				getUserRuleInfoByUserId(this.userId).then(res => {
					this.userRule=res.data.userRule
					this.userRule.cardFaceUrl = config.remotePicUrlPd+this.userRule.cardFaceUrl
					this.rightsList=res.data.rightsList
				})
			},
			
			queryOrderNum(){
				queryOrderNum({ userId: this.userId }).then(res=>{
					const data = (res && (res.data || res.result || res.body)) || {}
					const pending = data.pending ?? data.toBeShipped ?? data.unShippedNum ?? data.waitDeliver ?? 0
					const received = data.received ?? data.toBeReceived ?? data.unReceivedNum ?? data.waitReceive ?? 0
					const refund = data.refund ?? data.afterSale ?? data.afterSaleNum ?? data.refundNum ?? 0
					this.orderCounts = {
						pending: Number(pending) || 0,
						received: Number(received) || 0,
						refund: Number(refund) || 0
					}
				}).catch(err=>{
					console.error('queryOrderNum error', err)
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.profile-container {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 100rpx;
	}

	.profile-header {
		background: linear-gradient(64deg, #a8edfd 0%, #d7fede 80%);
		padding: 40rpx 30rpx;
		padding-top: 188rpx;
		padding-bottom: 40rpx;
		color: #333;
	}

	.user-info-section {
		display: flex;
		align-items: center;
		// margin-bottom: 30rpx;

		.avatar {
			width: 132rpx;
			height: 132rpx;
			border-radius: 66rpx;
			margin-right: 20rpx;
		}

		.user-details {
			flex: 1;

			.name-badge {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.username {
					font-size: 36rpx;
					// font-weight: bold;
					margin-right: 10rpx;
				}

				.verified-badge {
					width: 32rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}

				.verified-text {
					font-size: 24rpx;
					background: linear-gradient(90deg, #F4B75B 0%, #FF301A 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
				}
			}

			.user-id {
				display: block;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 6rpx;
			}

			.user-role {
				display: block;
				font-size: 28rpx;
				color: #000000;
			}
		}

		.edit-profile {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #000000;

			.edit-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.edit-text {
				font-size: 28rpx;
			}
		}
	}

	.membership-card {
		background-size: cover;
		background-position: center;
		border-radius: 10rpx;
		padding: 30rpx;
		color: #ffffff;
		height: 280rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		position: relative;
		transform: translateY(56rpx);
		/* Move card down by 20rpx */
		z-index: 1;
		margin-top: -12px;
		/* Ensure card stays above other content */

		.card-header {
			.vip-title {
				display: flex;
				align-items: center;

				.crown-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}

		.card-footer {
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;

			.points {
				font-size: 24rpx;
				color: #376477;
				display: block;
				margin-bottom: 10rpx;
			}

			.progress-bar {
				height: 10rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 5rpx;
				overflow: hidden;

				.progress {
					height: 100%;
					background: #02b3ff;
					border-radius: 5rpx;
					transition: width 0.3s;
				}
			}
		}
	}

	.benefits-section,
	.functions-section,
	.orders-section {
		position: relative;
		z-index: 0;
		/* Place below the card */
		background: #fff;
		// margin: 20rpx;
		padding: 30rpx;
		padding-top: 40rpx;
		// border-radius: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		// font-weight: bold;
		color: #000000;
		margin-bottom: 30rpx;
	}
	
	.orders-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 0;
		
		.orders-title {
			font-size: 32rpx;
			color: #000000;
		}
		
		.view-all {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.orders-card {
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		margin: 0 20rpx;
		overflow: hidden;
	}
	
	.orders-grid {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}
	
	.order-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 20rpx 10rpx;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.95);
		}
		
		.order-icon-wrapper {
			position: relative;
			margin-bottom: 10rpx;
			
			.order-icon {
				width: 48rpx;
				height: 48rpx;
			}
			
			.badge {
				position: absolute;
				top: -12rpx;
				right: -12rpx;
				background: #FF301A;
				color: #fff;
				font-size: 20rpx;
				min-width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 6rpx;
			}
		}
		
		.order-text {
			font-size: 24rpx;
			color: #000;
		}
	}

	.benefits-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 4rpx;
		text-align: center;
		padding-top: 30rpx;
	}

	.functions-grid1 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
		text-align: center;
		padding-top: 30rpx;
	}

	.benefit-item,
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.benefit-icon {
			width: 54rpx;
			height: 54rpx;
			margin-bottom: 10rpx;
		}
		
		.function-icon {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 10rpx;
		}

		.benefit-text,
		.function-text {
			font-size: 20rpx;
			color: #000;
			margin-bottom: 4rpx;
		}

		.benefit-desc {
			font-size: 16rpx;
			color: #999;
		}
	}

	.stats-section {
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding: 30rpx;

		.stat-item {
			position: relative;
			text-align: center;
			background: #F9F9FA;
			border-radius: 8rpx;
			padding: 20rpx;
			width: 300rpx;
			height: 160rpx;

			.label-row {
				position: absolute;
				top: 20rpx;
				left: 20rpx;
				right: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.stat-label {
					font-size: 28rpx;
					color: #000;
				}

				.arrow {
					font-size: 24rpx;
					color: #999;
				}
			}

			.stat-value {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 36rpx;
				// font-weight: bold;
				color: #000;
			}

			.stat-icon {
				position: absolute;
				bottom: 2rpx;
				right: 20rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;

		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.nav-icon {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 6rpx;
			}

			.nav-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
</style>